<style lang="scss" scoped>
  .commonecharts_body {
    .echart_container {
      width: 18.23vw;
      /*min-width: 300px;*/
      height: 11.98vw;
      box-sizing: border-box;
    }
  }
</style>
<template>
  <div class="commonecharts_body" >
    <div class="echart_container" :class="'echart_container_' + commonEchartsObj.echarts_name">

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'

  export default {

    data() {
      return {
        mychart: null,
        interTimer: null,
        option: {}
      }
    },
    props: {
      commonEchartsObj: {
        type: Object,
        required: true
      },
      percent: {
        type: Boolean,
        required: false
      }
    },
    mounted() {
      this.initEcharts()
    },
    methods: {
      initEcharts() {
        let that = this;
        const Echarts_container = '.echart_container_' + this.commonEchartsObj.echarts_name;
        const myChart = echarts.init(document.querySelectorAll(Echarts_container)[0], null, {renderer: 'svg'});
        this.mychart = myChart;
        myChart.resize()
        var option = {
          animation: false,
//          legend: {
//            top: 10,
//            left:20,
//            textStyle: {
//              color: '#597bad',
//              fontSize: 18,
//              padding: [0,0,20,0]
//            },
//            icon: 'none'
//          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12 * (document.body.clientWidth  / 1920)
            },
            extraCssText: 'z-index:999;',
          //  backgroundColor: 'rgba(0,0,0,0.7)',
            padding: 10,
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: '#1b5070'
              }
            },
            formatter: function(params) {
//              console.log(params);
              var result = ''
              var w = 10 * (document.body.clientWidth  / 1920) + 'px'
              function dotHtml(color) {
                return `<span style="display:inline-block;margin-right:5px;border-radius:50%;
width:${w};height:${w};background-color: ${color};"></span>`
              }
              params.forEach(function (item, index) {
                var co = item.color
                that.commonEchartsObj.line_list.forEach(i => {
                  if(item.seriesName === i.name ){
                    co = i.colorClass
                  }
                })
                result += (index === 0 ?item.axisValue : '') + "</br>" + dotHtml(co) + item.seriesName + ': ' + item.data + ' (吨)'
              })
              return result
            }
          },
          dataZoom: [
//            {
//              show: true,
//              realtime: true,
//              start: 50,
//              end: 100
//            },
//            {
//              type: 'inside',
//              realtime: true,
//              start: 50,
//              end: 100,
//            },
            {
              show: false,//是否显示滑动条
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: this.commonEchartsObj.num  // 一次性展示6个。
            }

          ],
          grid: {
            left: '20',
            top:'20',
            bottom: '10',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.commonEchartsObj.line_date,
            axisLine: {
              lineStyle: {
                color: '#203643'
              }
            },
            axisLabel: {
              interval:0,
              fontSize: 13 * (document.body.clientWidth  / 1920),
              color: '#E3E3E3',
              padding: [10,0,0,0]
            }
          },
          yAxis: {
            type: 'value',
            axisLabel: {
//              formatter: `{value} ${ that.wan ? '万': ''}${that.percent? '%': ''}`,
              fontSize: 12* (document.body.clientWidth  / 1920),
              color: '#597bad'
            },
            offset:10,
            axisLine: {
              lineStyle: {
                color: 'transparent'
              }
            },
            splitLine:{
              show:true,
              lineStyle:{
                type:'dashed',
                color: '#203643'
              }
            },
            minInterval: 1
          },
          series: this.commonEchartsObj.line_list
        };
        myChart.setOption(option);

        if (this.commonEchartsObj.line_list[0].data.length > 6) {
          if (this.interTimer) {
            clearInterval(this.interTimer)
          }
          this.interTimer = setInterval( ()=> {
            // 每次向后滚动一个，最后一个从头开始。
            if (option.dataZoom[0].endValue == this.commonEchartsObj.line_list[0].data.length) {
              option.dataZoom[0].endValue = this.commonEchartsObj.num;
              option.dataZoom[0].startValue = 0;
            }
            else {
              option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
              option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
            }
            this.mychart.setOption(option);
          }, 3000)
        }

      },
    },
    watch: {
      'commonEchartsObj': {
        handler(newVal, old) {
          this.initEcharts()
        },
        deep: true
      },
    },
    beforeDestroy() {
      if (this.mychart&& this.mychart.dispose) {
        this.mychart.dispose()
      }
      if (this.interTimer ) {
        clearInterval(this.interTimer )
      }
    }
  }
</script>
